<template>
<div>
    <div class="cart-header">
        <div class="back"></div>
        <h2>购物车</h2>
        <div class="edit">编辑</div>
    </div>
    <div class="cart-main">
        <div class="check">
            <label>
                <input type="checkbox" class="checkbox" id="checkAll1">
                <i></i>全选
            </label>
        </div>

        <div class="shop-list" id="shop-list">
            <div class="list">
                <label>
                    <input type="checkbox" class="checkbox">
                    <i></i>
                </label>
                <a href="javascript:;">
                    <img src="./img/prolist1.png" alt="">
                </a>
                <div class="desc">
                    <a href="javascript:;" class="title">NBR瑜伽垫 加大加厚加长防滑瑜伽垫</a>
                    <div class="spec-box">
                        <div class="spec">规格：
                            <span>150cm</span>
                            <span>蓝色</span>
                        </div>
                        <div class="num-wrap">
                            <div class="reduce"></div>
                            <input type="text" value="1">
                            <div class="add"></div>
                        </div>
                    </div>
                    <div class="price-box"> 
                        <div class="price">￥
                            <span class="rmb">188.0</span>
                        </div>
                        <div class="free">免运费</div>
                    </div>
                </div>
            </div>
            <div class="list">
                <label>
                    <input type="checkbox" class="checkbox">
                    <i></i>
                </label>
                <a href="javascript:;">
                    <img src="./img/prolist1.png" alt="">
                </a>
                <div class="desc">
                    <a href="javascript:;" class="title">NBR瑜伽垫 加大加厚加长防滑瑜伽垫</a>
                    <div class="spec-box">
                        <div class="spec">规格：
                            <span>150cm</span>
                            <span>蓝色</span>
                        </div>
                        <div class="num-wrap">
                            <div class="reduce"></div>
                            <input type="text" value="1">
                            <div class="add"></div>
                        </div>
                    </div>
                    <div class="price-box">
                        <div class="price">￥
                            <span class="rmb">188.0</span>
                        </div>
                        <div class="free">免运费</div>
                    </div>

                </div>
            </div>
            <div class="list">
                <label>
                    <input type="checkbox" class="checkbox">
                    <i></i>
                </label>
                <a href="javascript:;">
                    <img src="./img/prolist1.png" alt="">
                </a>
                <div class="desc">
                    <a href="javascript:;" class="title">NBR瑜伽垫 加大加厚加长防滑瑜伽垫</a>
                    <div class="spec-box">
                        <div class="spec">规格：
                            <span>150cm</span>
                            <span>蓝色</span>
                        </div>
                        <div class="num-wrap">
                            <div class="reduce"></div>
                            <input type="text" value="1">
                            <div class="add"></div>
                        </div>
                    </div>
                    <div class="price-box">
                        <div class="price">￥
                            <span class="rmb">188.0</span>
                        </div>
                        <div class="free">免运费</div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="cart-paybar">
        <div class="left">
            <label>
                <input type="checkbox" class="checkbox" id="checkAll2">
                <i></i>全选
            </label>
            <div class="total-wrap">
                <div class="total">合计：
                    <span class="money">￥
                        <i id="total">378.00</i>
                    </span>
                </div>
                <div class="fare">含运费</div>
            </div>
        </div>
        <div class="pay">结算</div>
    </div>
     <div class="cart-menubar">
        <a href="javascript:;" class="list">
            <span class="icon icon-home"></span>
            <i>首页</i>
        </a>
        <a href="javascript:;" class="list">
            <span class="icon icon-type"></span>
            <i>分类</i>
        </a>
        <a href="javascript:;" class="list on">
            <span class="icon icon-shop"></span>
            <i>购物车</i>
        </a>
        <a href="javascript:;" class="list">
            <span class="icon icon-order"></span>
            <i>我的订单</i>
        </a>
        <a href="javascript:;" class="list">
            <span class="icon icon-user"></span>
            <i>我</i>
        </a>
    </div>
</div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped lang='less'>
@import url('./css/shop_cart.css');
</style>